<template>
    <div>
      <transition name="maskFade">
      <div class="mask" v-if="show"><slot></slot></div>
      </transition>
    </div>
</template>
<script>
    export default {
        data(){
            return {
              show: false
            }
        },
        methods: {},
        computed: {},
        components: {}
    }
</script>
<style scoped lang="">
  .mask{
    position: fixed;
    left:50%;
    top:50%;
    width:auto;
    height:auto;
    padding:10px 20px;
    transform:translate(-50%,-50%);
    background-color: #696969;
    color: #fff;
    border-radius: 10px;
  }


  .maskFade-enter{opacity:0}
  .maskFade-enter-active{transition:1s linear}
  .maskFade-leave-active{opacity:0;transition:1s linear}
</style>
